<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'资源管理'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-select v-model="state" placeholder="发布状态" size="small" class="select mr10">
                                <el-option
                                    v-for="item in stateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="type" placeholder="资源类型" size="small" class="select mr10">
                                <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-model="resName" placeholder="请输入资源名称" size="small"
                                      class="input mr10"></el-input>
                            <el-button class="primary" size="small" @click="getList(1)">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" size="small" @click="addRes">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="resLevel" slot-scope="scope">
                            <span>{{scope.row.resLevel==1?'省级':(scope.row.resLevel==2?'市级':(scope.row.resLevel==3?'区级':''))}}</span>
                        </template>
                        <template slot="resPower" slot-scope="scope">
                            <span>{{scope.row.resPower==1?'公开':'受限'}}</span>
                        </template>
                        <template slot="isRelease" slot-scope="scope">
                            <span>{{scope.row.isRelease==1?'已发布':'未发布'}}</span>
                        </template>
                        <template slot="collectionSituation" slot-scope="scope">
                            <span>{{scope.row.collectionSituation==1?'已归集':'未归集'}}</span>
                        </template>
                        <template slot="resType" slot-scope="scope">
                            <span>{{scope.row.resType==1?'服务接口类':(scope.row.resType==2?'服务页面类':'数据交换类')}}</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" @click="openDialog(scope.row)">发布
                                </el-link>
                                <el-link type="primary" :underline="false" @click="resDown(scope.row)">下架</el-link>
                                <el-link type="primary" :underline="false" @click="openDetail(scope.row)">编辑
                                </el-link>
                                <el-link type="primary" :underline="false" @click="openImplement(scope.row)">编目
                                </el-link>
                                <!--                        <el-link type="primary" :underline="false" @click="resRemove(scope.row)">删除</el-link>-->
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-box :show.sync="show" ref="dialog" :title="'资源发布'" :width="'450px'"
                        @save="saveDialog()" @cancel="closeDialog">
                <div class="form-common release left">
                    <div class="form-item">
                        <div class="form-item-label">权限</div>
                        <div class="form-item-content">
                            <el-select v-model="resPower" placeholder="状态" size="small" class="select">
                                <el-option
                                    v-for="item in resPowerList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item" v-if="resPower!=1">
                        <div class="form-item-label">审批部门</div>
                        <div class="form-item-content" v-if="show">
                            <select-tree @loadNode="loadNode"
                                         :lazy.sync="provideDeptTree.lazy"
                                         :model.sync="dept"
                                         :size="'small'"
                                         :loading.sync="provideDeptTree.loading"
                                         :renderTree.sync="provideDeptTree.renderTree"
                                         :clearable.sync="provideDeptTree.clearable"
                                         :filterable.sync="provideDeptTree.filterable"
                                         :accordion.sync="provideDeptTree.accordion"
                                         :expandAll.sync="provideDeptTree.expandAll"
                                         :provideDeptTree="provideDeptTree"
                                         @filterMethod="dataFilter"
                                         :props="dataConsumersprops"
                                         :options="provideDeptTree.options"
                                         @nodeClick="treeNodeClick"
                                         class="openWay">
                            </select-tree>
                        </div>
                    </div>
                </div>
            </dialog-box>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>
<script>
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import dialogBox from '../../components/dialog'
    import selectTree from '../../components/select-tree'
    import {mapGetters} from 'vuex'

    export default {

        data() {
            return {
                stateOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '未发布',
                        value: 0
                    },
                    {
                        label: '已发布',
                        value: 1
                    }
                ],
                typeOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '服务接口类',
                        value: 1
                    },
                    {
                        label: '数据交换类',
                        value: 3
                    },
                    {
                        label: '服务页面类',
                        value: 2
                    }
                ],
                resPowerList: [
                    {
                        label: '公开',
                        value: 1
                    },
                    {
                        label: '受限',
                        value: 2
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resCode',
                        label: '资源唯一标识符',
                        minWidth: '180',
                        align: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '资源来源',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'resType',
                        label: '资源类型',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'resLevel',
                        label: '应用范围',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'resPower',
                        label: '对内共享权限',
                        minWidth: '120',
                        align: 'center'
                    },
                    {
                        prop: 'collectionSituation',
                        label: '归集状态',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'isRelease',
                        label: '发布状态',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '170',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'resLevel', 'resPower', 'isRelease', 'collectionSituation', 'resType'],
                page: {},
                loading: false,
                index: 1,
                resName: '',
                state: '',
                resPower: 1,
                type: '',
                show: false,
                currentList: null,
                firstDeptList: null,
                dept: {
                    value: '',
                    label: ''
                },
                dataConsumersprops: {
                    value: 'id', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        mounted() {
            this.getList()
        },
        computed: {
            ...mapGetters([
                'userRole'
            ])
        },
        methods: {
            openDialog(row) {
                this.currentList = row
                this.resPower = row.resPower
                this.dept = {
                    value: row.resPowerDeptId || row.resSourceDeptId,
                    label: row.resPowerDept || row.resSourceDept
                }
                this.show = true
            },
            saveDialog() {
                let url = '/rdResourceApplicationDetail/addApprovalConfigOnLine'
                if (this.currentList.collectionSituation === 2) {
                    url = '/rdResForOnline/addApprovalConfigNotOnLine'
                }
                this.$http.post(url, {
                    deptId: this.resPower === 1 ? null : this.dept.value,
                    resId: this.currentList.id,
                    resPower: this.resPower
                }).then(result => {
                    if (result.success) {
                        this.$message.success({
                            message: '发布成功',
                            showClose: true
                        })
                        this.show = false
                        this.getList()
                        this.closeDialog()
                    }
                })
            },
            closeDialog() {
                this.resPower = 1
                this.dept = {
                    value: '',
                    label: '',
                    id: ''
                }
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                let url = '/admin/resPageList'
                if (this.$route.matched[0].path !== '/sp-manager') url = '/deptAdmin/deptResPageList'
                // if (this.userRole === 1) url = '/deptAdmin/deptResPageList'
                this.$http.get(url, {
                    current: this.index || 1,
                    size: 15,
                    resName: this.resName,
                    state: this.state,
                    type: this.type
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.resName = ''
                this.state = null
                this.type = null
                this.getList(1)
            },
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail/' + row.id
                })
            },
            openImplement(row) {
                this.$router.push({
                    path: this.$route.path + '/inventory',
                    query: {
                        id: row.id,
                        type: row.resType
                    }
                })
            },
            addRes() {
                this.$router.push({
                    path: this.$route.path + '/add'
                })
            },
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || ''
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            },
            resDown(row) {
                this.$confirm('确定要下架吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/admin/resDown', {
                        id: row.id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '下架成功'
                            })
                            this.getList()
                        }
                    })
                }).catch(() => {
                })
            }
        },
        components: {
            page,
            tableExample,
            breadcrumb,
            dialogBox,
            selectTree
        }
    }
</script>

<style scoped lang="less">
    .form-common.release {
        margin: 0 30px;

        .form-item {
            .form-item-label {
                width: 90px;
                color: #333;
                padding-right: 20px;
            }

            .form-item-content {
                margin-left: 90px;

                > * {
                    width: 100%;
                }
            }
        }
    }
</style>
